<template>
  <div class="min-h-screen bg-gray-50 p-4 lg:p-6">
    <LazyAdminNavBar />
    <h1 class="text-2xl lg:text-3xl font-bold text-gray-800 mb-6">首页内容管理</h1>

    <!-- 网站基本信息模块 -->
    <LazySiteInfoSection v-model="siteInfo" class="mb-8" />

    <!-- 核心服务模块 -->
    <LazyAdminServicesSection v-model="services" class="mb-8" />

    <!-- 客户案例模块 -->
    <LazyCaseStudiesSection v-model="caseStudies" class="mb-8" />

    <!-- 团队成员模块 -->
    <LazyTeamMembersSection v-model="teamMembers" class="mb-8" />

    <!-- 合作伙伴模块 -->
    <LazyPartnersSection v-model="partners" class="mb-8" />

    <!-- 联系表单模块 -->
    <!-- <ContactSubmissionsSection v-model="contactSubmissionData" class="mb-8" /> -->

    <!-- 保存按钮 -->
    <div class="fixed bottom-6 right-6">
      <button @click="saveAll"
        class="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow-lg hover:bg-indigo-700 transition-colors flex items-center">
        保存所有更改
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { SiteInfo, Service, CaseStudy, TeamMember, Partner, ContactSubmission } from '~/types/home';
// 导入各个组件
import SiteInfoSection from '../../components/admin/SiteInfoSection.vue'
import AdminServicesSection from '../../components/admin/AdminServicesSection.vue'
import CaseStudiesSection from '../../components/admin/CaseStudiesSection.vue'
import TeamMembersSection from '../../components/admin/TeamMembersSection.vue'
import PartnersSection from '../../components/admin/PartnersSection.vue'
import ContactSubmissionsSection from '../../components/admin/ContactSubmissionsSection.vue'
import adminNavBar from '../../components/admin/admin-nav-bar.vue'
const { getHomeData, updateHomeData } = useHomeApi()

definePageMeta({
  layout: 'minimal',
  showHeader: false
});

// 初始化数据
let siteInfo = ref<SiteInfo>({
  companyName: '创新科技有限公司',
  slogan: '引领科技未来，创造无限可能',
  logo: '/images/logo.png',
  gradient: 'bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500'
})

const services = ref<Service[]>([
  {
    id: 1,
    title: '网站开发',
    description: '专业的企业官网、电商平台及定制化系统开发',
    icon: 'carbon-application',
    iconColor: 'text-blue-600',
    iconBg: 'bg-blue-100',
  },
  {
    id: 2,
    title: '移动应用',
    description: 'iOS和Android平台原生应用开发',
    icon: 'carbon-mobile',
    iconColor: 'text-green-600',
    iconBg: 'bg-green-100',
  }
])

const caseStudies = ref<CaseStudy[]>([
  {
    id: 1,
    title: '电商平台重构项目',
    description: '为知名零售企业重构电商平台，提升性能300%',
    image: 'https://img0.baidu.com/it/u=933220220,287299241&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    alt: '电商平台界面截图',
  }
])

const teamMembers = ref<TeamMember[]>([
  {
    id: 1,
    name: '张明',
    role: '首席技术官',
    avatar_seed: 'zhangming',
    border_color_class: 'border-blue-300',
    sort_order: 1,
    is_leadership: true
  }
])


const partners = ref<string[]>([]) // 空数组初始化


const contactSubmissionData = ref<ContactSubmission[]>([
  {
    id: 1,
    name: '李女士',
    contact_info: 'lily@example.com',
    requirements: '咨询企业官网建设方案',
    status: 'pending',
  }
])

// 保存所有数据
const saveAll = () => {
  console.log('保存所有数据:', {
    siteInfo,
    services: services.value,
    caseStudies: caseStudies.value,
    teamMembers: teamMembers.value,
    partners: partners.value,
    contactSubmissions: contactSubmissionData.value
  })
  updateHomeData({
    banner: siteInfo.value,
    services: services.value,
    cases: caseStudies.value,
    team: teamMembers.value,
    partners: partners.value,
    // contactSubmissions: contactSubmissionData.value
  })
  // 这里实际调用API保存数据
}

onMounted(async () => {
  try {
    let data = await getHomeData()
    console.log('获取数据:', data)
    siteInfo.value = data.banner
    services.value = data.services
    caseStudies.value = data.cases
    teamMembers.value = data.team
    partners.value = data.partners

  } catch (err) {
  }
})
</script>